

// 提取用户名
renderUser()

// 鉴定权限
checkLogin()

// 退出登录
logout()


// 渲染数据
const list = document.querySelector('.list')
async function getData() {
  const { data } = await axios.get('/students')
  list.innerHTML = data.map(item => {
    // 0男1女
    // if (item.gender) {
    //   item.gender = '女'
    // } else {
    //   item.gender = '男'
    // }
    return `<tr>
              <td>${item.name}</td>
              <td>${item.age}</td>
              <td>${item.gender ? '女' : '男'}</td>
              <td>第${item.group}组</td>
              <td>${item.hope_salary}</td>
              <td>${item.salary}</td>
              <td>${item.province}${item.city}${item.area}</td>
              <td>
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
              </td>
            </tr>`
  }).join('')

}
getData()

const proSelect = document.querySelector('[name="province"]')
const citSelect = document.querySelector('[name="city"]')
const areaSelect = document.querySelector('[name="area"]')
// 数据增删改查
// 初始化省市区
let p = ''
async function intiSelect() {
  // 显示省份
  const { list } = await axios.get('/api/province')
  const html1 = list.map(item => {
    return `<option value="${item}">${item}</option>`
  }).join('')
  proSelect.innerHTML = `<option>--省份--</option>` + html1
  // 切换省份  显示城市
  proSelect.addEventListener('change', async function (e) {
    p = e.target.value
    const { list } = await axios.get(`/api/city?pname=${e.target.value}`)
    const html2 = list.map(item => {
      return `<option value="${item}">${item}</option>`
    }).join('')
    citSelect.innerHTML = `<option>--城市--</option>` + html2
    // 切换省份数据  还原数据
    areaSelect.innerHTML = `<option>--地区--</option>`
  })
  // 切换城市  显示地区
  citSelect.addEventListener('change', async function (e) {
    const { list } = await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
    const html3 = list.map(item => {
      return `<option value="${item}">${item}</option>`
    }).join('')
    areaSelect.innerHTML = `<option> --地区-- </option>` + html3
  })
}
intiSelect()

// 定义标识
let rowId
// 增
const add = document.querySelector('#openModal')
// form
const form = document.querySelector('#form')
// 模态框确认
const btnOK = document.querySelector('#submit')
// 显示弹框
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)


// 监听模态框的显示和隐藏
add.addEventListener('click', function () {
  // 给标识赋值
  rowId = null

  modal.show()
})
// modalDom.addEventListener('show.bs.modal', event => {
//   // 显示
// })
// modalDom.addEventListener('hide.bs.modal', event => {
//   // 隐藏
// })




list.addEventListener('click', async function (e) {
  // 判断事件源是否为编辑
  if (e.target.classList.contains('bi-pen')) {
    // 给定义的标识赋值
    rowId = e.target.dataset.id
    // 数据请求 拿到点击的数据
    const { data } = await axios.get(`/students/${rowId}`)

    // 给标签绑定数据
    // 给规则的表单进行赋值
    const resArr = ['name', 'age', 'salary', 'group', 'hope_salary']
    resArr.forEach(item => {
      document.querySelector(`[name=${item}]`).value = data[item]
    })
    // 给性别进行回显
    const genders = document.querySelectorAll('[name="gender"]')
    genders[data.gender].checked = true
    // 给籍贯进行回显
    const { province, city, area } = data
    // 回显省份
    proSelect.value = province 
    // 回显城市
    const { list: list1 } = await axios.get(`/api/city?pname=${province}`)
    const html2 = list1.map(item => {
      return `<option value="${item}">${item}</option>`
    }).join('')
    citSelect.innerHTML = `<option>--城市--</option>` + html2
    // 回显
    // 省市区下拉菜单回显
    citSelect.value = city
    // 回显地区
    const { list: list2 } = await axios.get(`/api/area?pname=${province}&cname=${city}`)
    const html3 = list2.map(item => {
      return `<option value="${item}">${item}</option>`
    }).join('')
    areaSelect.innerHTML = `<option>--地区--</option>` + html3
    // 回显
    areaSelect.value = area
    // 显示提示框
    modal.show()
  }
  // 判断是否是删除业务
  if (e.target.classList.contains('bi-trash')) {
    const id = e.target.dataset.id
    const flag = confirm('您真的要删除吗???')
    if (flag) {
      // 删除数据
      await axios.delete(`/students/${id}`)
      // 提示
      showToast('删除成功')
      //渲染 
      getData()
    }

  }

})
// 模态框确定
btnOK.addEventListener('click', async function () {
  // 判断是编辑还是添加
  if (rowId) {
    // 编辑
    const data = serialize(form, { hash: true, empty: true })
    // 处理数据
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
    // 提交数据
    await axios.put(`/students/${rowId}`, data)
    // 提示信息
    showToast('编辑成功~')
    // 重新渲染
    getData()

  } else {
    // 添加
    const data = serialize(form, { hash: true, empty: true })
    // 处理数据
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
    // 提交数据
    await axios.post('/students', data)
    // 提示信息
    showToast('添加成功~')
    // 重新渲染
    getData()
  }
  // 弹出框隐藏
  modal.hide()
})
// 监听模态框是否显示，显示修改标题
modalDom.addEventListener('show.bs.modal', event => {
  // 三元表达式  在添加时赋值了rowId =null所以最后面的标题是添加学员
  document.querySelector('.modal-title').innerHTML = rowId ? '编辑学员' : '添加学员'
})
// 隐藏
modalDom.addEventListener('hide.bs.modal', event => {
  form.reset()

})
